<template>
	<view style="width: 100%;">
		<view class="buyRadiusBox eatTypeBox">
			<view class="title" v-if="isEdit">是否自提</view>
			<view class="sltype" v-if="isEdit">
				<view class="tabWrap">
					<view class="item" :class="{'selected':orderInfo.selfServiceFlag==1}" @click="setTab(1)">是</view>
					<view class="item" :class="{'selected':orderInfo.selfServiceFlag==2}" @click="setTab(2)">否</view>
				</view>
			</view>
			<view class="canteenEat" :class="{'noeditbox':!isEdit}">
				<view class="inputItem">
					<view class="txt">联系人：</view>
					<input class="myinput" v-model="orderInfo.memberName" :disabled="!isEdit"/>
				</view>
				<view class="inputItem">
					<view class="txt">联系电话：</view>
					<input class="myinput" v-model="orderInfo.memberPhone" :disabled="!isEdit"/>
				</view>
				<view class="inputItem" v-if="orderInfo.selfServiceFlag==2">
					<view class="txt">居住地址：</view>
					<input class="myinput" v-model="orderInfo.memberAddress" :disabled="!isEdit"/>
				</view>
				<view class="inputItem" v-if="orderInfo.selfServiceFlag==2">
					<view class="txt">配送费：</view>
					<view class="desc">¥{{orderInfo.deliveryFee || 0}}</view>
				</view>
			</view>
		</view>
		<view class="buyRadiusBox eatTypeBox" style="padding: 0;">
			<view class="canteenEat" :class="{'noeditbox':!isEdit}">
				<view class="inputItem">
					<view class="txt">备注：</view>
					<input class="myinput" v-model="orderInfo.remark" :disabled="!isEdit"/>
				</view>
				<view class="inputItem">
					<view class="txt">{{orderInfo.selfServiceFlag==2?'发货点':'自提点'}}：</view>
					<view class="rdbox">
						<service-station v-model="orderInfo.serviceStationId" style="width: 100%;" :disabled="!isEdit" @onchange="change"/>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {defineComponent,reactive,toRefs,onMounted,getCurrentInstance,computed} from 'vue'
	import {onLoad,onShow} from '@dcloudio/uni-app'
	import { useStore } from 'vuex'
	import {serviceStation} from "./serviceStation.vue"
	import {toast} from "@/utils/common.js"
	export default defineComponent({
		components:{
			serviceStation
		},
		props:{
			isEdit:{
				type:Boolean,
				default:true
			}
		},
		setup(props,context) {
			const store = useStore()
			const {proxy} = getCurrentInstance()
			
			const state = reactive({
				orderInfo:computed(()=>store.state.base.orderInfo), 
				userInfo:computed(()=>store.state.base.userInfo)
			})
			
			onMounted(()=>{
				//console.log("orderInfo-mall:",state.orderInfo)
				state.orderInfo.memberName = state.userInfo.name
				state.orderInfo.memberPhone = state.userInfo.phone
				state.orderInfo.memberAddress = state.userInfo.address
			})
			
			const setTab = index =>{
				//state.type = index
				state.orderInfo.selfServiceFlag = index
				//store.commit('base/set_orderInfo',{selfServiceFlag:index})
				
			}
			
			const change = (item)=>{
				state.orderInfo.serviceStationName = item.name
			}
			
			const checkForm = ()=>{
				if(!state.orderInfo.memberName){
					toast('请输入联系人')
					return false
				}else if(!state.orderInfo.memberPhone){
					toast('请输入联系电话')
					return false
				}else if(state.orderInfo.selfServiceFlag==2 && !state.orderInfo.memberAddress){
					toast('请输入居住地址')
					return false
				}else if(!state.orderInfo.serviceStationId){
					toast('请选择'+(state.orderInfo.selfServiceFlag==1?'自提点':'发货点'))
					return false
				}
				return true
			}
			
			return {
				...toRefs(state),
				setTab,
				change,
				checkForm
			}
		}
	})
</script>

<style lang="scss" scoped>
	.eatTypeBox{
		box-sizing: border-box;
		width: 100%;
		background: #fff;
		padding: 0;
		border-radius: 30rpx;
		//box-shadow: 0 0 10rpx #afafaf;
		margin: 0 0 30rpx 0;
		.title{
			text-align: center;
			font-size: 34rpx;
			font-weight: bold;
			padding: 40rpx 0 0 0;
		}
		.sltype{
			width: 500rpx;
			margin:30rpx auto 0 auto;
			padding: 0 0 20rpx 0;
		}
		.canteenEat{
			box-sizing: border-box;
			margin: 0;
			padding: 0;
			&.noeditbox{
				.inputItem{
					.myinput{
						color: #999;
					}
				}
			}
			.inputItem{
				display: flex;
				height: 90rpx;
				line-height:90rpx;
				border-bottom:1px solid #e3e3e3;
				padding:0 30rpx;
				font-size: 30rpx;
				.txt{
					width: 190rpx;
					color: #363535;
				}
				.myinput{
					display: block;
					height: 100%;
					line-height:90rpx; 
					vertical-align:middle;
					font-size: 30rpx;
				}
				.desc{
					flex: 1;
					text-align: right;
				}
				.rdbox{
					flex: 1;
					display: flex;
					align-items: center;
				}
			}
		}
	}
	.tabWrap{
		display: flex;
		width: 100%;
		height: 70rpx;
		line-height: 70rpx;
		border-radius: 35rpx;
		border: 2rpx solid #fba70e;
		overflow: hidden;
		font-size: 32rpx;
		font-weight: 600;
		.item{
			flex: 1;
			text-align: center;
			&.selected{
				background: #fba70e;
			}
		}
	}
</style>
